<template>
  <div class="mobile clearfix">
    <MobileHeader />
    
    <div class="article-list-mobile detail clearfix">
      <div class="main clearfix">
        <!-- <h3>{{ article.title }}</h3> -->
        <div class="tip">
          <!--<span>时间：<i>2020.07.17</i></span>-->
          <!-- <span class="viewnum_ajax">点击数：<i style="display: inline;">50</i> 次</span>-->
          <!-- <span>发布来源：本站原创</span>                                            </div>-->
        </div>
        <div class="content clearfix" v-html="html" v-if="html != null">
        </div>
      </div>
      <!--       <div class="r-top rad5" @click="$router.go(-1)">-->
      <div class="r-top rad3" v-on:click="back">
        <i class="iconfont icon-fanhuidingbu"></i>
        <a>返回上级</a>
      </div>
    </div>
    <MobileFooter />
  </div>
</template>

<script>
import MobileHeader from './MobileHeader.vue'
import MobileFooter from "./MobileFooter";
import _http from "../httpService";

export default {
  name: "MobileArticle",
  components: {
    MobileHeader,
    MobileFooter
  },
  data() {
    return {
      myBackToTopStyle: {
        right: "100px",
        bottom: "150px",
        width: "40px",
        height: "40px",
        "border-radius": "20px",
        "line-height": "40px",
        background: "#fff",
      },
      attachment: null,
      html: null,
      article: null,
      pdf_loading_progress: 0.0,
    };
  },
  created() {
    _http.get("/content/jcContent/queryById?id=" + this.$route.params.id)
      .then((resp) => {
        if (resp.data.success) {
          this.article = resp.data.result;
          console.log(resp.data.result);
          this.html = resp.data.result.content;
          this.attachment = resp.data.result.attachment;

          console.log(this.html);
        } else this.html = "<h1>文章正在读取中...</h1>";
      })
      .catch((error) => console.log(error))
      .finally(() => (this.loading = false));
  },
  methods: {
    progress(number) {
      this.pdf_loading_progress = number;
    },
    back() {
      this.$router.go(-1);//返回上一层
    },
    backToTop() {
      let distanceY = window.pageYOffset;
      let i = 0;
      this.interval = setInterval(() => {
        let next = Math.floor(
          this.easeInOutQuad(10 * i, distanceY, -distanceY, 500)
        );
        if (next <= this.backPosition) {
          window.scrollTo(0, this.backPosition);
          clearInterval(this.interval);
        } else {
          window.scrollTo(0, next);
        }
        i++;
      }, 17);
    },
  },

  watch: {
    //监听相同路由下参数变化的时候，从而实现异步刷新
    $route() {
      console.log(this.$route.params.id + "-------------");
      _http.get("/content/jcContent/queryById?id=" + this.$route.params.id)
        .then((resp) => {
          if (resp.data.success) {
            console.log()
            this.article = resp.data.result;
            console.log(resp.data.result);
            this.html = resp.data.result.content;
            this.attachment = resp.data.result.attachment;

            console.log(this.html);
          } else this.html = "<h1>文章正在读取中...</h1>";
        })
        .catch((error) => console.log(error))
        .finally(() => (this.loading = false));
    },
    immediate: true,
  },
}
</script>

<style scoped></style>
